<script setup lang="ts">
import clsx from 'clsx'
import { BarChart, LineChart } from 'echarts/charts'
import {
  GridComponent,
  LegendComponent,
  TitleComponent,
  TooltipComponent,
} from 'echarts/components'
import { type EChartsCoreOption, use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import VueECharts from 'vue-echarts'

defineProps<{
	option: EChartsCoreOption
	className?: string
}>()

const chartProps = {
	autoresize: true,
	class: 'bg-white p-10',
};

use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  GridComponent,
  BarChart
])

</script>

<template>
	<VueECharts v-bind="chartProps" :class="clsx(className)" :option="option" />
</template>
<style scoped></style>
